<template>
  <div class="enroll">
    <RollbackBarView :to="'/'" :title="'注册'" />
    <div class="enroll-box">
      <div class="username">
        <span>用户名</span>
        <div class="user">
          <input v-model="nm" type="text" placeholder="请输入用户名" />
        </div>
      </div>
      <div class="account">
        <span>手机号码</span>
        <div class="phone">
          <input v-model="acc" type="Number" placeholder="请输入手机号码" />
        </div>
      </div>
      <div class="pwd-box">
        <span>密码</span>
        <div class="pwd">
          <input v-model="pwd" type="password" placeholder="请输入密码" />
        </div>
      </div>
      <div class="enroll-btn" @click="regFunc">注册</div>
      <div class="login" @click="sendMsg">登录</div>
    </div>
  </div>
</template>

<script>
import RollbackBarView from "./RollbackBarView.vue";

export default {
  data() {
    return {
      nm: "",
      pwd: "",
      acc: "",
    };
  },
  inject: ["getUser"],
  methods: {
    sendMsg() {
      this.$emit("getMsg", 0);
    },
    regFunc() {
      this.$http
        .post("http://192.168.27.59/reguser", {
          username: this.nm,
          acc: this.acc,
          pwd: this.pwd,
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code == 200) {
            this.$toast.success(data.message);
            this.$router.replace({ name: "user" });
            this.getUser();
          } else {
            this.$toast.success(data.message);
          }
        });
    },
  },
  components: { RollbackBarView },
};
</script>

<style lang="scss" scoped>
.enroll {
  background-color: #fff;
  width: 100vw;
  .enroll-box {
    padding: 6vmin;
    box-sizing: border-box;

    .username,
    .account,
    .pwd-box {
      margin-bottom: 1.25rem;
      span {
        font-size: 0.875rem;
      }
      div {
        height: 8vmin;
        margin: 0.375rem 0;
        input {
          width: 100%;
          height: 100%;
          border: none;
          background-color: #f4f4f4;
          border-radius: 0.625rem;
          padding: 0 0.625rem;
          box-sizing: border-box;
          font-size: 14px;
        }
      }
    }
    .enroll-btn {
      width: 100%;
      height: 1.875rem;
      background-color: black;
      border-radius: 0.625rem;
      text-align: center;
      color: #fff;
      line-height: 1.875rem;
    }
    .login {
      width: 100%;
      height: 1.875rem;
      border-radius: 0.625rem;
      text-align: center;
      line-height: 1.875rem;
      margin-top: 0.5rem;
      border: 1px solid rgba($color: #000000, $alpha: 0.1);
    }
  }
}
</style>
